<template>




  <div class="ui attached pointing menu">
    <div class="ui container">
      <div class="right menu">
        <a href="/admin/type-input" class="item">新增</a>
        <a href="/admin/type" class="teal active item">列表</a>
      </div>
    </div>
  </div>

  <!--中间内容-->
  <div  class="m-container-small m-padded-tb-big">
    <div class="ui container">

      <div v-if="success">
        <div class="ui success message">
          <i @click="close" class="close icon"></i>
          <div class="header">提示：</div>
          <p>恭喜，操作成功！</p>
        </div>
      </div>


      <table class="ui compact teal table">
        <thead>
        <tr>
          <th></th>
          <th>名称</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="type in types">
          <td v-text="type.id"></td>
          <td v-text="type.name"></td>
          <td>
            <a style="cursor: pointer" @click="toEdit(type.id,type.name)" class="ui mini teal basic button">编辑</a>
            <a style="cursor: pointer" @click="deleteType(type.id)" class="ui mini red basic button">删除</a>
          </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
          <th colspan="6" >
            <div class="ui mini pagination menu">
              <div v-if="preBoolean">
                <a style="cursor:pointer" @click="toPreType" class="item">上一页</a>
              </div>
              <div v-if="nexBoolean">
                <a style="cursor:pointer" @click="toNexType" class="item">下一页</a>
              </div>
            </div>
            <a href="/admin/type-input" class="ui mini right floated teal basic button">新增</a>
          </th>
        </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <br>
  <br>


</template>

<script>
import axios from "axios";

export default {
  data(){
    return {
      types: [],
      preBoolean: '',
      nexBoolean: '',
      curPage: '',
      success: false
    }
  },
  mounted() {
    this.getType();
    this.$store.commit('setAo2');
  },
  methods:{
    getType(){
      var temp = sessionStorage.getItem("typeSuccess");
      if (temp === "0"){
        this.success = false;
      }else {
        this.success = true;
      }
      sessionStorage.setItem("typeSuccess","0");
      // alert(1212)
      axios.get('http://localhost:7070/getType/0').then((res)=>{
        console.log(res.data);
        this.types = res.data.types;
        this.curPage = res.data.curPage;
        this.preBoolean = res.data.preBoolean;
        this.nexBoolean = res.data.nexBoolean;
        // location.reload();
      });
      // this.success = sessionStorage.getItem('typeSuccess');
      // sessionStorage.setItem('typeSuccess',false);
      // alert();
      // if (sessionStorage.getItem("store")) {
      //   this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))
      // };
      // console.log(sessionStorage.getItem("store"));
    },
    toPreType(){
      axios.get('http://localhost:7070/getType/'+(this.curPage-1)).then((res)=>{
        console.log(res.data);
        this.types = res.data.types;
        this.curPage = res.data.curPage;
        this.preBoolean = res.data.preBoolean;
        this.nexBoolean = res.data.nexBoolean;
        // location.reload();
      })
    },
    toNexType(){
      axios.get('http://localhost:7070/getType/'+(this.curPage+1)).then((res)=>{
        console.log(res.data);
        this.types = res.data.types;
        this.curPage = res.data.curPage;
        this.preBoolean = res.data.preBoolean;
        this.nexBoolean = res.data.nexBoolean;
        // location.reload();
      })
    },
    deleteType(id){
      axios.get('http://localhost:7070/admin/type/'+id+'/delete').then((res)=>{
        if (res === 0){
        }else {
          axios.get('http://localhost:7070/getType/0').then((res)=>{
            console.log(res.data);
            this.types = res.data.types;
            this.curPage = res.data.curPage;
            this.preBoolean = res.data.preBoolean;
            this.nexBoolean = res.data.nexBoolean;
            // location.reload();
          });
          this.success = true;
          // location.reload()
        }
      })
    },
    toEdit(id,name){
      this.$router.push({path: '/admin/type-input', query: {id: id,name: name}})
    },
    close(){
      this.success = false;
    }
  }
}
</script>

<style scoped>

</style>